<template>
  <div class="card-panel">
    <div class="group" v-for="group in goupCard" :key="group.name">
      <h3 class="group-title">{{ group.name }}</h3>
      <draggable
        v-model="group.groupCards"
        item-key="cardKey"
        :group="{ name: 'preview', pull: 'clone', put: false }"
        :sort="false"
        :filter="'.undraggable'"
        class="group-draggable"
        @clone="onCloneCard"
      >
        <template #item="{ element }">
          <div :class="{ item: true, undraggable: element.disabled }">
            <rb-icon :type="element.icon" />
            <span class="text">{{ element.cardName }}</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';
import draggable from 'vuedraggable';
import { GroupCard } from '@/model/designer/dataTemplate';
import { GetCardCode, GetAllCard } from '@/global/util/common';

export default defineComponent({
  name: 'CardPanel',
  components: {
    draggable,
  },
  setup() {
    const store = useStore();
    const formCards = computed(() => store.state.formDesign.form.formCards);
    const goupCard = ref(GroupCard);
    const onCloneCard = (data: any) => {
      const card = data.item.__draggable_context.element;
      // 属性赋值
      const cardCode = GetCardCode(formCards.value, card);
      if (card?.controls?.cardCode) {
        card.controls.cardCode.defaultValue = cardCode;
      }
      Object.assign(card, { cardCode });
      return true;
    };

    return {
      goupCard,
      onCloneCard,
    };
  },
});
</script>
<style lang="less" scoped>
.card-panel {
  .flexColumn(flex-start, flex-start);
  height: 100%;
  width: 248px;
  overflow-y: auto;
  .group {
    width: 100%;
    padding: 12px 12px 4px;
    margin-bottom: 12px;
    background-color: @rb-body-background;
    &-title {
      font-size: 14px;
      font-weight: bolder;
      line-height: 20px;
      padding-bottom: 12px;
    }
    &-draggable {
      .flexRow(space-between, center);
      flex-wrap: wrap;
      .item {
        flex: 0 0 48%;
        margin-bottom: 8px;
        padding: 6px 8px;
        border-radius: 2px;
        background-color: @rb-background-color-light;
        cursor: grabbing;
        &.undraggable {
          color: @rb-disabled-color;
          background-color: @rb-disabled-bg-color;
          cursor: no-drop;
          .rb-icon {
            cursor: no-drop;
          }
        }
        .rb-icon {
          padding-right: 4px;
          color: @rb-label-color;
        }
        .text {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
